<template>
  <div>
    <!-- 头部 -->
    <Menu mode="horizontal" theme="dark" active-name="1">
      <div class="layout-logo">
        <div class="logoText">
          <div class="textName">商家管理系统</div>
          <div class="textIcon">
            <!-- <Icon
              @click.native="collapsedSider"
              :class="rotateIcon"
              :style="{ margin: '0 20px' }"
              type="md-menu"
              size="24"
            ></Icon> -->
          </div>
          <div>
            <!-- 面包屑 -->
            <menuBreadcrumb />
          </div>
        </div>
      </div>
      <div class="layout-nav" v-if="true">
        <MenuItem name="1">
          <Icon type="ios-navigate"></Icon>
          Item 1
        </MenuItem>
        <MenuItem name="2">
          <Icon type="ios-keypad"></Icon>
          Item 2
        </MenuItem>
        <MenuItem name="3">
          <Icon type="ios-analytics"></Icon>
          Item 3
        </MenuItem>
        <MenuItem name="4">
          <Icon type="ios-paper"></Icon>
          Item 4
        </MenuItem>
      </div>
    </Menu>
  </div>
</template>

<script>
import menuBreadcrumb from "@/components/menu/menuBreadcrumb.vue";
export default {
  components: { menuBreadcrumb },
  data() {
    return {};
  },
  computed: {},
  methods: {
   

  },
};
</script>

<style lang="scss">
.rotate-icon {
  transform: rotate(-90deg);
}
.ivu-menu-dark {
  background-color: #262f3e;
}

.layout-logo {
  width: 400px;
  height: 36px;
  // background: #5b6270;
  border-radius: 3px;
  float: left;
  position: relative;
  top: 15px;
  left: 20px;

  .logoText {
    display: flex;
    text-align: center;
    line-height: 36px;
    .textName {
      color: #d7dde4;
      margin-left: 20px;
    }
    .textIcon {
      width: 64px;
      height: 40px;
      margin-left: 20px;
      line-height: 40px;
    }
  }
}

.layout-nav {
  width: 420px;
  margin: 0 auto;
  margin-right: 20px;
}
</style>